<template>
  <a-modal v-model:open="visible" title="下载结果" width="90%" style="top: 20px" :footer="null">
    <a-row style="margin-bottom: 10px">
      <a-col :span="8">
        <a-statistic title="总数" :value="stat.totalCount" style="margin-right: 50px" />
      </a-col>
      <a-col :span="8">
        <a-statistic
          title="成功数"
          :value="stat.totalCount - stat.errorCount"
          style="margin-right: 50px"
          :value-style="{ color: '#3f8600' }"
        />
      </a-col>
      <a-col :span="8">
        <a-statistic title="失败数" :value="stat.errorCount" :value-style="{ color: '#cf1322' }" />
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data-source="errorList"
      bordered
      size="small"
      :pagination="{ defaultPageSize: 8 }"
    >
      <template #title>失败列表</template>
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'index'">
          <span>{{ index + 1 }}</span>
        </template>
        <template v-if="column.dataIndex === 'tarballDir'">
          <a-tooltip>
            <template #title>{{record.tarballUrl}}</template>
            {{record.tarballDir}}
          </a-tooltip>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="() => openErrorLog(record.logText)">查看日志</a-button>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:open="errorLogOpen"
      title="错误日志"
      width="60%"
      style="top: 30px"
      :footer="null"
      :bodyStyle="{ height: '75vh' }"
    >
      <log-code-mirror v-model="logContent" />
    </a-modal>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = defineModel('visible')
const logContent = ref('')
const errorLogOpen = ref(false)

defineProps({
  stat: {
    type: Object,
    required: true
  },
  errorList: {
    type: Array,
    required: true
  }
})

const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '包名',
    dataIndex: 'tarballDir'
  },
  {
    title: '版本号',
    dataIndex: 'tarbalVersion'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]

function openErrorLog(logText) {
  logContent.value = logText
  errorLogOpen.value = true
}
</script>

<style scoped>
.errorLogModal {
  height: 80vh;
  overflow-y: auto;
}
</style>
